import React from 'react';
import { Card, Row, Col, Button } from 'antd';
import {
    CodeOutlined,
    BookOutlined,
    ProjectOutlined,
    ApiOutlined,
    RocketOutlined,
    ToolOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './QuickNav.scss';

const QuickNav: React.FC = () => {
    const navigate = useNavigate();

    const navItems = [
        {
            title: '项目结构',
            icon: <ProjectOutlined />,
            desc: '了解项目架构和技术栈',
            path: '/project-structure',
            color: '#1890ff'
        },
        {
            title: '技术文档',
            icon: <BookOutlined />,
            desc: '查看开发文档和教程',
            path: '/docs',
            color: '#52c41a'
        },
        {
            title: '组件示例',
            icon: <CodeOutlined />,
            desc: '浏览组件使用示例',
            path: '/examples',
            color: '#722ed1'
        },
        {
            title: 'API 接口',
            icon: <ApiOutlined />,
            desc: '接口文档和测试',
            path: '/api-docs',
            color: '#13c2c2'
        },
        {
            title: '最佳实践',
            icon: <RocketOutlined />,
            desc: '开发规范和最佳实践',
            path: '/best-practices',
            color: '#eb2f96'
        },
        {
            title: '开发工具',
            icon: <ToolOutlined />,
            desc: '常用工具和插件',
            path: '/tools',
            color: '#fa8c16'
        }
    ];

    return (
        <div className="quick-nav">
            <h2 className="section-title">快速导航</h2>
            <Row gutter={[16, 16]}>
                {navItems.map(item => (
                    <Col xs={24} sm={12} md={8} key={item.path}>
                        <Card
                            className="nav-card"
                            style={{ borderTop: `2px solid ${item.color}` }}
                            hoverable
                            onClick={() => navigate(item.path)}
                        >
                            <div className="nav-icon" style={{ color: item.color }}>
                                {item.icon}
                            </div>
                            <div className="nav-content">
                                <h3>{item.title}</h3>
                                <p>{item.desc}</p>
                            </div>
                            <Button 
                                type="link" 
                                className="nav-button"
                                style={{ color: item.color }}
                            >
                                查看详情
                            </Button>
                        </Card>
                    </Col>
                ))}
            </Row>
        </div>
    );
};

export default QuickNav; 